import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import { MonitorEchartsService } from '@services/echarts/charts.service';

@Component({
    selector: 'monitor-page',
    templateUrl: 'monitor.html',
    styleUrls: ['monitor.scss']

})

export class MonitorPage implements OnInit {
    options;
    Toptions;
    Soptions;
    constructor(public navCtrl: NavController, public chart: MonitorEchartsService) {
    }

    ngOnInit() {
        const Data1 = {
            Break: 1,
            BreakColor: '#F15654',
            BreakDes: '中断',
            Normal: 1,
            NormalColor: '#62c97E',
            NormalDes: '正常',
            Total: 2,
            TotalColor: 'transparent',
            TotalDes: '项目总数',
        };

        const Data2 = {
            Break: 2,
            BreakColor: '#F15654',
            BreakDes: '中断',
            Normal: 2,
            NormalColor: '#62c97E',
            NormalDes: '正常',
            Pre: 50.5,
            Total: 4,
            TotalColor: 'transparent',
            TotalDes: '数据栈数',
        };
        const Data3 = {
            Break: 4,
            BreakColor: '#F15654',
            BreakDes: '中断',
            Normal: 37,
            NormalColor: '#62c97E',
            NormalDes: '正常',
            Total: 41,
            TotalColor: 'transparent',
            TotalDes: '仪表总数',
        };
        this.options = this.paint(Data1, 's');
        this.Toptions = this.paint(Data3, 'T');
        this.Soptions = this.paint(Data2, 'S');
        console.log(this.options);
        console.log(this.Toptions);
        console.log(this.Soptions);
    }

    paint (data, key) {
        return this.chart.showPie(data, this.createPieData(data, key));
    }

    createPieData(data, key) {
        const defaultOption = {
            's': {
                color: '#F55454',
                base_color: '#62c97e',
                textColor: '#F55454',
                subtextColor: '#000000'
            },
            'T': {
                color: '#F9C62A',
                base_color: '#62c97e',
                textColor: '#F9C62A',
                subtextColor: '#000000'
            },
            'S': {
                color: '#4F90FA',
                base_color: '#F1F1F1',
                textColor: '#4F90FA',
                top: '35%'
            }
        };
        return key === 'S' ? {
            text: data.Pre + '%',  // 四舍五入 Math.round((data.Normal*100)/data.Total)
            textColor: defaultOption[key].textColor,
            top: defaultOption[key].top,
            color: defaultOption[key].color,
            base_color: defaultOption[key].base_color,
        } : {
                text: data.Break,
                subtext: data.Total,
                textColor: defaultOption[key].textColor,
                subtextColor: defaultOption[key].subtextColor,
                color: defaultOption[key].color,
                base_color: defaultOption[key].base_color,
            };
    }

}
